<template>
  <div class="user-management-container">
    <!-- 顶部查询和列表区域（左右布局，自动填充屏幕高度） -->
    <div class="top-section">
      <!-- 左侧查询区域 -->
      <div class="query-section">
        <el-card class="full-height">
          <template #header>
            <div class="card-header">用户查询</div>
          </template>
          <el-form ref="form" :model="form" label-width="80px" size="small">
            <el-form-item label="用户名">
              <el-input v-model="form.userName" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="昵称">
              <el-input v-model="form.nickName" placeholder="请输入昵称"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="form.phonenumber" placeholder="请输入手机号"></el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input type="textarea"
                        :rows="2" v-model="form.remark" placeholder="请输入备注"
              ></el-input>
            </el-form-item>
            <div class="button-container">
              <el-button type="primary" @click="search" class="el-buttonsouso">搜索</el-button>
              <el-button @click="resetForm" size="medium" class="el-buttonsouso">重置</el-button>
            </div>
          </el-form>
        </el-card>
      </div>
      <!-- 右侧结果区域 -->
      <div class="result-section">
        <el-card class="full-height">
          <template #header>
            <div class="card-header">用户列表</div>
          </template>
          <el-table
            :data="tableData"
            border
            stripe
            v-loading="loading"
            element-loading-text="数据加载中"
          >
            <el-table-column prop="userName" label="用户名称" align="center"></el-table-column>
            <el-table-column prop="nickName" label="用户昵称" align="center"></el-table-column>
            <el-table-column prop="sex" label="性别" align="center" :formatter="formatSex"></el-table-column>
            <el-table-column prop="phonenumber" label="手机号" align="center"></el-table-column>
            <el-table-column prop="email" label="邮箱" align="center"></el-table-column>
            <el-table-column prop="remark" label="备注" align="center"></el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="160"
            >
              <template slot-scope="scope">
                <el-button @click="viewUser(scope.row)" type="text" size="small">查看</el-button>
                <el-button @click="editUser(scope.row)" type="text" size="small">编辑</el-button>
                <el-button @click="deleteUser(scope.row)" type="text" size="small" class="text-danger">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryParams.pageNum"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="queryParams.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            style="text-align: right; margin-top: 20px;"
          >
          </el-pagination>
        </el-card>
      </div>
    </div>
    <!-- 底部系统信息区域（固定高度，始终在页面底部） -->
    <div class="bottom-info-box">
      <el-card>
        <template #header>
          <div class="card-header">商家信息</div>
        </template>
        <merchan/>
      </el-card>
    </div>
    <el-drawer
      :visible.sync="drawerVisible"
      :direction="drawerDirection"
      :size="drawerSize"
      :close-on-escape="false"
      title="用户信息"
    >
      <user-details :userId="selectedUserId" @close="closeDrawer"/>
    </el-drawer>
  </div>
</template>

<script>
import { getDataList } from '@/api/list/user'
import UserDetails from '@/views/list/user/userDetails.vue'
import Address from '@/views/list/user/address.vue'
import Merchan from '@/views/list/user/merchan.vue'
import File from '@/views/list/merchan/file.vue'

export default {
  components: { Merchan, UserDetails, Address,File },
  data() {
    return {
      form: {
        userName: '',
        nickName: '',
        email: '',
        phonenumber: '',
        remark: ''
      },
      tableData: [],
      total: 0,
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 5
      },
      currentTime: new Date().toLocaleString(),
      loginUser: 'admin',
      totalUserCount: '统计中...',

      // 抽屉组件状态
      drawerVisible: false,
      drawerDirection: 'rtl',
      drawerSize: '60%',
      selectedUserId: null
    }
  },
  mounted() {
    this.search() // 页面加载后自动搜索
  },
  methods: {
    search() {
      this.loading = true
      getDataList(this.queryParams, this.form).then((response) => {
        this.tableData = response.rows || []
        this.total = response.total || 0
        this.totalUserCount = this.total
        this.loading = false
      })
        .catch((error) => {
          this.loading = false
          this.$message.error('获取用户列表失败')
        })
    },
    resetForm() {
      this.form = {} // 重置表单数据
      this.search() // 重新搜索
    },
    handleSizeChange(size) {
      this.queryParams.pageNum = 1 // 切换页数时重置为第一页
      this.queryParams.pageSize = size
      this.search()
    },
    handleCurrentChange(page) {
      this.queryParams.pageNum = page // 更新当前页码
      this.search()
    },
    formatSex(row) {
      return row.sex === '0' ? '男' : row.sex === '1' ? '女' : '未知' // 格式化性别显示
    },
    // 操作按钮示例方法（可根据需求实现具体逻辑）
    viewUser(row) {
      this.selectedUserId = row.userId
      this.drawerVisible = true
    },
    editUser(row) {
      console.log('编辑用户:', row)
    },
    deleteUser(row) {
      this.$confirm(`确定要删除用户 ${row.userName} 吗?`, '提示', {
        type: 'warning'
      })
        .then(() => {
          // 实际删除逻辑
          this.$message.success('删除成功')
          this.search() // 删除后重新加载数据
        })
        .catch(() => {
          this.$message.info('已取消删除')
        })
    },
    closeDrawer() {
      this.drawerVisible = false
      this.selectedUserId = null

    }
  }
}
</script>

<style scoped>
/* 全局盒模型重置 */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.user-management-container {
  display: flex;
  flex-direction: column;
  min-height: 90vh; /* 占满视口高度 */
  background-color: #f0f2f5;
  padding: 20px;
}

.top-section {
  display: flex;
  flex: 1; /* 自动填充顶部空间 */
  gap: 20px;
  margin-bottom: 20px; /* 底部区域间距 */
}

.query-section {
  flex: 0 0 30%; /* 左侧固定30%宽度 */
  min-width: 300px; /* 最小宽度防止挤压 */
}

.result-section {
  flex: 1; /* 右侧占剩余70% */
  min-width: 500px;
}

.full-height {
  height: 100%; /* 卡片占满父容器高度 */
}

.el-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  background-color: white;
}

.bottom-info-box {
  flex-shrink: 0; /* 底部固定高度，不压缩 */
}

.card-header {
  font-weight: 500;
  font-size: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid #ebf0f5;
}

.info-content {
  padding: 24px;
  line-height: 1.8;
  color: #6c757d;
}

/* 响应式布局：小屏幕时切换为垂直排列 */
@media (max-width: 1200px) {
  .top-section {
    flex-direction: column;
    gap: 15px;
  }

  .query-section,
  .result-section {
    flex: 1;
    min-width: auto;
  }
}

/* 表格样式优化 */
.el-table {
  margin-top: 15px;
  width: 100%;
}

.el-table__fixed-right {
  right: 0;
}

.el-pagination {
  margin-top: 20px;
  padding: 0 24px 24px;
}

.el-buttonsouso {
  padding: 0 16px; /* 左右内边距调整为 16px（原 small 为 0 12px） */
  height: 30px; /* 高度调整为 36px（原 small 为 32px） */
  font-size: 14px; /* 字体大小（原 small 为 13px） */
}

.button-container {
  display: flex;
  justify-content: center;
  gap: 10px;
}
</style>
